<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pea tips社区</title>
<link rel="stylesheet" type="text/css" href="/networkforum/css/base.css" />
<link rel="stylesheet" type="text/css" href="/networkforum/css/picture_show.css" />
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script type="text/javascript">
window.onload = function(){
	/*var canvas=document.getElementById('myCanvas');
	var ctx=canvas.getContext('2d');
	//ctx.fillStyle='#FF0000';
	//ctx.fillRect(2,4,80,100);
	//ctx.rotate(12);
	//ctx.save();
	//ctx.moveTo(10,10);
	//ctx.lineTo(100,100);
	//ctx.lineTo(10,100);
	//ctx.stroke();
	
	ctx.fillStyle='#000000';
	ctx.rotate(Math.PI/9);
	var pic = new Image();
	pic.src = "/networkforum/images/left1.jpg";
	var tt = document.getElementById("tt");
	ctx.drawImage(pic,10,10);
	*/
}
var move = function(){
	var target = function(){
		this.target = null;
		this.length = 94;
		this.index = 0;
	}
	target.prototype = {
		init:function(){
			var self = this;
			self.target = document.getElementById("target");			
		},
		right:function(){
			var self = this;
			if(self.target==null){
				self.init();
			}
			if(self.index<8){
				self.move(2);
				self.index = self.index + 1;
			}
			else{
				self.target.style.left = "0px";	
				self.index = 0;
			}
		},
		left:function(){
			var self = this;
			if(self.target==null){
				self.init();
			}
			if(self.index!=0){
				self.move(-2);	
				self.index = self.index -1 ;							
			}
			else{
				self.target.style.left = self.length*8 + "px";	
				self.index = 8;
			}
		},
		move:function(l){
			var self = this;
			var i =0;
			var m = setInterval(function(){
				self.target.style.left = self.target.offsetLeft + l + "px";
				i = i+2;
				if(i>=self.length){
					clearInterval(m);	
				}
			},1);
		}	
	}
	return new target();
}();
</script>
</head>

<body>
	<iframe id="tnav" class="tnav" src="/networkforum/pages/user/user_header.html"></iframe>
	<!-- 
		<canvas height="100" width="200" id="myCanvas">
			<p>your browserdoes not support the canvase element!</p>
		</canvas>
	 -->
	<section class="pictureShow">
		<section class="leftInner">
			<header id="tt" class="leftHeader">
				<h2>图片浏览</h2>
			</header>
			<section class="leftMain">
				<img onclick="move.left();" onmouseover="cbp(this,'/networkforum/images/pleft2.jpg')" onmouseout="cbp(this,'/networkforum/images/pleft1.jpg')" class="leftPicture change" src="/networkforum/images/pleft1.jpg"/>
				<div class="pictureMain">
					<img id="pictureMain" src="/networkforum/pages/error.jpg"/>
				</div>
				<img onclick="move.right();" onmouseover="cbp(this,'/networkforum/images/pright2.jpg')" onmouseout="cbp(this,'/networkforum/images/pright1.jpg')" class="rightPicture change" src="/networkforum/images/pright1.jpg"/>
			</section>
			<section class="leftBottom">
				<img onmouseover="cbp(this,'/networkforum/images/pleft2.jpg')" onmouseout="cbp(this,'/networkforum/images/pleft1.jpg')" class="leftPicture ulchange" src="/networkforum/images/pleft1.jpg"/>
				<section class="bcent">
                    <ul id="picutreNav">
                            <div id="target" class="alpha5"></div>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                            <li>
                                <img src="/networkforum/images/left1.jpg" />
                            </li>
                    </ul>
                </section>
				<img onmouseover="cbp(this,'/networkforum/images/pright2.jpg')" onmouseout="cbp(this,'/networkforum/images/pright1.jpg')" class="rightPicture ulchange" src="/networkforum/images/pright1.jpg"/>
			</section>
		</section>
		<section class="rightInner">
			<header class="rightHeader">
				<img src="/networkforum/images/left1.jpg"/>
                <label>a爱爱爱爱</label>
                <label>2012-2-2 2:12:12</label>
                <div class="clear"></div>
                <label id="sign">今天天气有点大</label>
			</header>
            <section class="rightNav">
            	<label>赞</label>
                <label>评论</label>
            </section>
			<section class="rightMain">
				评论
			</section>
		</section>
	</section>
	
	<iframe class="footer" src="/networkforum/pages/footer.html"></iframe>
</body>
<script type="text/javascript" src="/networkforum/js/base.js"></script>
</html>

